<template>
  <div class="cart-top">
    <span class="num"> 购买数量: {{ cartStore.number }} </span>
    <span class="manager" @click="switchManagerStatus">
      {{ managerStatus ? "取消" : "管理" }}
    </span>
  </div>
  <div class="items-container">
    <div class="item" v-for="item in cartStore.items" :key="item.id">
      <van-checkbox v-model="item.selected" />
      <div class="item-info">
        <van-card
          :num="item.number"
          :price="item.price"
          :title="item.name"
          :thumb="item.pic"
        >
          <template #footer>
            <van-stepper v-model="item.number" />
          </template>
        </van-card>
      </div>
    </div>
  </div>
  <van-submit-bar
    :price="cartStore.price * 100"
    button-text="提交订单"
    @submit="onSubmit"
  >
    <van-checkbox v-model="allChecked">全选</van-checkbox>
    <template #button>
      <van-button size="small" v-if="managerStatus" round>删除</van-button>
      <van-button size="small" v-else type="danger" round>确定</van-button>
    </template>
  </van-submit-bar>
  <Tabbar />
</template>

<script setup lang="ts" name="CartPage">
import Tabbar from "@/components/Tabbar.vue";
import { ref, onMounted, computed } from "vue";
import useCartStore from "@/stores/cart";
const cartStore = useCartStore();
// 管理状态 为true 可以删除商品
const managerStatus = ref(false);
// 切换管理状态
const switchManagerStatus = () => {
  managerStatus.value = !managerStatus.value;
};
// 购物车商品全选
const allChecked = computed({
  get() {
    return cartStore.items.every((item) => item.selected);
  },
  set(val) {
    console.log("点击修改了全选");
  },
});

const onSubmit = () => {};
onMounted(() => {
  cartStore.fetchCartInfo();
});
</script>

<style scoped lang="scss">
.cart-top {
  height: 40px;
  background-color: #fafafa;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
.van-submit-bar {
  bottom: 50px;
}
.items-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 40px;
  bottom: 100px;
  overflow-y: auto;
  .item {
    display: flex;
    .van-checkbox {
      margin: 0 10px;
    }
    .item-info {
      flex: 1;
      .van-card {
        background-color: #fff;
      }
    }
  }
}
</style>
